<template >
	<!--<div class="login-main">
		<div class="z-main"> 
			<div class="logo">
				<el-image :src="src" width="200px" height="300px">
				</el-image>
			</div>
						<h2>System</h2>
		</div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
		  <el-form-item label="username" prop="username" class="login-main1">
		    <el-input v-model="ruleForm.username"></el-input>
		  </el-form-item>
		  
		   <el-form-item label="password" prop="password" class="login-main1">
		    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
		  </el-form-item>
			
		  <el-form-item>
		    <el-button type="primary" class="login-main1" @click="submitForm('ruleForm')">Login</el-button>
		  </el-form-item>
		  
		</el-form>
	</div>	-->
	
		<div style="margin-top:10px;">
			<span>日期:</span>
			<el-date-picker
				v-model="rantime"
				value-format="yyyy-MM-dd"
				type="daterange"
				start-placeholder="Start Date"
				end-placeholder="End Date"
				:default-time="['00:00:00', '23:59:59']"
			></el-date-picker>
			
			<el-button  type="danger" icon="el-icon-tickets" @click="SaleOut()">销售出库</el-button>
		</div>
	
		
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          username: '',
          db:'1',
          password:'',
        },
        rantime:[],
        DB:[],
        rules: {
          username: [
            { required: true, message: 'Please input username', trigger: 'blur' },
            { min: 3, max: 35, message: '3 to 35 characters in length', trigger: 'blur' }
          ],
          password: [
            { required: true, message: 'Please input password', trigger: 'blur' },
            { min: 3, max: 35, message: '3 to 35 characters in length', trigger: 'blur' }
          ],
        },
				src: './login.jpg',
      };
    },
    created(){
    	//this.getDbData();
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post('/login',{username:this.ruleForm.username,password:this.ruleForm.password,db:this.ruleForm.db})
				.then(result => {
					if(result.data.code == 200){
		    			document.cookie = "user_info="+JSON.stringify(result.data.result);
		    			this.$notify({type:"success", message:result.data.message});
		    			window.location.href = "/"
					}else{
						this.$message.error(result.data.message);
					}
				})
				.catch(error => {
					this.$message.error("login error");
				})
            
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      SaleOut(){
      	axios.post('/api/caigouupdate',({time:this.rantime}))
					.then(result => {
						if(result.data.code == 200){
							this.$message({
		    					type:"success",
		    					message:result.data.message
		    				});
						}else{
							this.$message({
								type:"warning",
		    					message:result.data.message 
		    				});
						}
					})
					.catch(error => {
						this.$message.error('请求错误');
					})
      },
      
      getDbData(){
      	axios.get('/getDbData')
					.then(result => {
						if(result.data.code == 200){
							this.DB = result.data.result;
						}
					})
					.catch(error => {
						this.loading = false;

					})
      	
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="scss" >
.demo-ruleForm{
	width: 450px;
	    margin-left: 50%;
    transform: translate(-50%);
}
.login-main{
	margin:0px auto;
	height: 100vh;
	    padding-top: 50vh;
    transform: translate(0,-220px);
		.z-main{
			border:0px solid red;
			margin-bottom:30px;
			text-align: center;
			.logo{
				  display: inline-block;
					width: 70px;
					position: relative;
					top: 20px;
					margin-left: 30px;
					margin-right: 5px;
			}
			h2{
				display: inline-block
			}
		}
		.el-select .el-input{
			width:100%
		}
	}
.login-main1{border:0px solid red;width:100%;}
.select-main{
	// width:50%;
	border:0px solid red;}
.select-main1{
		width:100%;
		border:0px solid red;
		.el-select{
			.el-input{width:100% !important; }
		} 
} 


</style>



